<template>
	<view class="container">

		<view class="content">
			<text class="top-tips">营业日</text>
			
			<view class="select-list">
				<view @tap="selectTimeHandle(item)" :class="reportDateType==item.type?'select-check':''"
					class="select-item" v-for="(item,index) in timeList" :key="index">{{item.name}}</view>
			
			</view>
			<view class="top-item" >
			
				<view class="time-num" @tap="startShow=true">
					<text :class="startTime?'timestyle':'timestyled'">{{startTime||'请选择开始时间'}}</text> <u-icon name="arrow-down" color="#d8d8d8" size="20"></u-icon>
				</view>
				<view class="time-center">
					到
				</view>
				<view class="time-num" @tap="endShow=true">
					<text :class="endTime?'timestyle':'timestyled'">{{endTime||'请选择结束时间'}}</text> <u-icon name="arrow-down" color="#d8d8d8" size="20"></u-icon>
				</view>
				<view class="time-btn" @click="corpReportHandle">
					查询
				</view>
			</view>
			

			<view class="conten-center">
				<view class="center-title">
					<view class="title-btn">
						
					</view>
					<text>数据概览</text>
				</view>
				
				<view class="sort-list">
					<view class="sort-item" @tap="changeRevenSort">
						<view class="sort-name">
							营收
						</view>
						<view class="sort-img">
							
							<image  :src="revenueSort?'../../static/up-active.png':'../../static/up.png'" mode=""></image>
							
							<image style="margin-top: 2rpx;" v-if="!revenueSort&&revenueSort!==null" src="../../static/low-active.png" mode=""></image>
							<image v-else style="margin-top: 2rpx;" src="../../static/low.png" mode=""></image>
						</view>
					</view>
					<view class="sort-item" @tap="changeOccupancyRateSort">
						<view class="sort-name">
							入住率
						</view>
						<view class="sort-img">
							<image  :src="occupancyRateSort?'../../static/up-active.png':'../../static/up.png'" mode=""></image>
							
							<image style="margin-top: 2rpx;" v-if="!occupancyRateSort&&occupancyRateSort!==null" src="../../static/low-active.png" mode=""></image>
							<image v-else style="margin-top: 2rpx;" src="../../static/low.png" mode=""></image>
						</view>
					</view>
					<view class="sort-item" @tap="changeRevPARSort">
						<view class="sort-name">
							RevPAR
						</view>
						<view class="sort-img">
							<image  :src="revPARSort?'../../static/up-active.png':'../../static/up.png'" mode=""></image>
							
							<image style="margin-top: 2rpx;" v-if="!revPARSort&&revPARSort!==null" src="../../static/low-active.png" mode=""></image>
							<image v-else style="margin-top: 2rpx;" src="../../static/low.png" mode=""></image>
						</view>
					</view>
					<view class="sort-item" @tap="changeAverageRoomPriceSort">
						<view class="sort-name">
							平均房价
						</view>
						<view class="sort-img">
							<image  :src="averageRoomPriceSort?'../../static/up-active.png':'../../static/up.png'" mode=""></image>
							
							<image style="margin-top: 2rpx;" v-if="!averageRoomPriceSort&&averageRoomPriceSort!==null" src="../../static/low-active.png" mode=""></image>
							<image v-else style="margin-top: 2rpx;" src="../../static/low.png" mode=""></image>
						</view>
					</view>
				</view>
				
				<view class="list-conent">
					<view class="item" v-for="(item,index) in reportData" :key="index">
						<view class="item-top">
							<view class="item-top-btn">
								
							</view>
							<text>{{item.hotelName}}</text>
						</view>
						<view class="item-bottom">
							<view class="item-bottom-cell">
								营收: {{item.totalRevenue}}
							</view>
							<view class="item-bottom-cell">
								入住率: 
								{{item.occupancyRate?Number(item.occupancyRate*100).toFixed(0):0}}%
							</view>
							
							<view class="item-bottom-cell">
								RevPAR: {{item.revPAR}}
							</view>
							<view class="item-bottom-cell">
								平均房价: {{item.averageRoomPrice}}
							</view>
						</view>
					</view>
				</view>
			

			</view>
			
		</view>
		<u-picker :default-time="endTime" @confirm="selectEndTime" v-model="endShow" mode="time"></u-picker>
		<u-picker :default-time="startTime" @confirm="selectStartTime" v-model="startShow" mode="time"></u-picker>

	</view>
</template>

<script>
	import {
		corpReport
	} from '@/api/index.js'
	export default {
		data() {
			return {
				startShow: false, //开始时间
				endShow: false, //结束时间
				reportData:[],
				timeList: [{
						name: "昨天",
						type: 1
					},
					{
						name: "本周",
						type: 2
					},
					{
						name: "上周",
						type: 3
					},
					{
						name: "本月",
						type: 4
					},
					{
						name: "上月",
						type: 5
					}
				],
				reportDateType: 1,
				timeShow: false,
				startTime: "",
				endTime: "",
				revenueSort:null,
				occupancyRateSort:null,
				revPARSort:null,
				averageRoomPriceSort:null
			}
		},
		onShow() {
			this.corpReportHandle()
		},
		methods: {
			changeAverageRoomPriceSort(){
				this.revenueSort=null
				this.occupancyRateSort=null
				this.revPARSort=null
				if(this.averageRoomPriceSort==null){
					this.averageRoomPriceSort=true
					
				}else{
					if(this.averageRoomPriceSort){
						
						this.averageRoomPriceSort=false
					}else{
						
						this.averageRoomPriceSort=null
					}
					
				}
				this.corpReportHandle()
			},
			changeRevPARSort(){
				this.revenueSort=null
				this.occupancyRateSort=null
				this.averageRoomPriceSort=null
				if(this.revPARSort==null){
					this.revPARSort=true
					
				}else{
					if(this.revPARSort){
						
						this.revPARSort=false
					}else{
						
						this.revPARSort=null
					}
					
				}
				this.corpReportHandle()
			},
			changeOccupancyRateSort(){
				this.revenueSort=null
				this.revPARSort=null
				this.averageRoomPriceSort=null
				if(this.occupancyRateSort==null){
					this.occupancyRateSort=true
					
				}else{
					if(this.occupancyRateSort){
						
						this.occupancyRateSort=false
					}else{
						
						this.occupancyRateSort=null
					}
					
				}
				this.corpReportHandle()
			},
			changeRevenSort(){
				this.occupancyRateSort=null
				this.revPARSort=null
				this.averageRoomPriceSort=null
				if(this.revenueSort==null){
					this.revenueSort=true
					
				}else{
					if(this.revenueSort){
						
						this.revenueSort=false
					}else{
						
						this.revenueSort=null
					}
					
				}
				this.corpReportHandle()
				
			},
			async corpReportHandle(){
				const res =await corpReport({
					reportDateType:this.reportDateType,
					startDate:this.startTime,
					endDate:this.endTime,
					revenueSort:this.revenueSort,
					occupancyRateSort:this.occupancyRateSort,
					revPARSort:this.revPARSort,
					averageRoomPriceSort:this.averageRoomPriceSort
				})
				this.reportData = res.data
			},
			
			// 选择结束时间
			selectEndTime(e) {
				this.endTime = e.year + '-' + e.month + '-' + e.day
			},
			// 选择开始时间
			selectStartTime(e) {
				this.startTime = e.year + '-' + e.month + '-' + e.day
			},
			selectTimeHandle(item) {
				this.reportDateType = item.type;
				// 获取今天的日期
				const today = new Date();
				const year = today.getFullYear();
				const month = today.getMonth() + 1;
				const day = today.getDate();

				if (item.name === "昨天") {
					// 设置昨天的时间
					// 获取当前日期
					
					// 计算昨天的日期
					const yesterday = new Date(year, month-1, day );
					
					// 转换为ISO字符串并截断时间部分
					this.startTime = yesterday.toISOString().split('T')[0];
					this.endTime = yesterday.toISOString().split('T')[0];

				} else if (item.name === '本周') {
					// 本周的开始时间（周一）
					const firstDayOfWeek = new Date(year, month - 1, day - ((today.getDay() + 6) % 7) + 1);
					this.startTime = firstDayOfWeek.toISOString().split('T')[0];
					this.endTime = today.toISOString().split('T')[0];
				} else if (item.name === '上周') {
					// 上周的开始时间（上周一）
					const lastWeekStart = new Date(year, month - 1, day - ((today.getDay() + 6) % 7) + 1 - 7);
					this.startTime = lastWeekStart.toISOString().split('T')[0];
					// 上周的结束时间（上周日）
					const lastWeekEnd = new Date(year, month - 1, day - ((today.getDay() + 6) % 7) - 1);
					this.endTime = today.toISOString().split('T')[0];
				} else if (item.name === '本月') {
					// 本月的开始时间（1号）
					const firstDayOfMonth = new Date(year, month - 1, 2);
					this.startTime = firstDayOfMonth.toISOString().split('T')[0];
					this.endTime = today.toISOString().split('T')[0];
				} else if (item.name === '上月') {
				// 获取当前日期
				const today = new Date();
				
				// 将日期设置为上个月的最后一天
				today.setDate(0);
				
				// 上月的结束时间（上个月最后一天）
				const lastMonthEnd = today.toISOString().split('T')[0];
				
				// 获取上个月的天数
				const lastMonthDays = new Date(today.getFullYear(), today.getMonth(), 0).getDate();
				
				// 将日期设置为上个月的第一天
				today.setDate(1);
				
				// 上月的开始时间（上个月1号）
				const lastMonthStart = today.toISOString().split('T')[0];
				
				// 更新实例变量
				this.startTime = lastMonthStart;
				this.endTime = lastMonthEnd;

				}

				// 结束时间不早于开始时间
				const startDate = new Date(this.startTime);
				const endDate = new Date(this.endTime);
				if (endDate < startDate) {
					uni.showToast({
						title: "结束时间不能早于开始时间",
						icon: 'none'
					});
					return false;
				}

				this.corpReportHandle();
			},


			
			
			gotoRevenue() {
				uni.navigateTo({
					url: '/pages/index/revenue'
				})
			},
			gotoHotelList() {
				uni.navigateTo({
					url: '/pages/hotelsList/hotelsList'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f7f7f7;
		min-height: 100vh;
		
	}

	.top {
		height: 120rpx;
		background: #FFFFFF;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		font-family: Source Han Sans SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #000;
		font-weight: bold;

	}

	.check-btn {
		margin-left: 20rpx;
		width: 164rpx;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(93, 95, 238, 0.12);
		border-radius: 20rpx;
		text-align: center;
		line-height: 80rpx;
		color: #1296db;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
	}

	.content {
		padding: 24rpx;
		// padding-top: 40rpx;
		box-sizing: border-box;
	}
	
	.top-tips{
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: 700;
		font-size: 34rpx;
		color: #020202;
	}
	
	.select-list {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	
		.select-item {
			// font-size: 12rpx;
			width: 120rpx;
			height: 56rpx;
			background: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #020202;
		}
	
		
	
		.select-check {
			background-color: #066AFB;
			color: #FFFFFF;
		}
	}
	
	.top-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		.select-text {
			color: #1296db;
			font-size: 30rpx;
			margin-left: 20rpx;
		}
	
		.time-num {
			width: 256rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			border: 2rpx solid #EEEEEE;
			display: flex;
			align-items: center;
			padding:0 12rpx;
			box-sizing: border-box;
			line-height: 64rpx;
			text-align: center;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #1A1A1A;
	
		}
		.timestyle{
			flex: 1;
			color: #1A1A1A;
		}
		
		.timestyled{
			
			color: #8A8A8A;
			flex: 1;
		}
	
		.time-btn {
			width: 120rpx;
			height: 64rpx;
			background: #0868FA;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			line-height: 64rpx;
			text-align: center;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	
		.time-center {
		
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 28rpx;
		}
	}

	.content-top {

		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx;

		.top-tips {
			font-family: Alibaba PuHuiTi 2.0;
			font-size: 36rpx;
			color: #000;
			font-weight: 500;
		}

		

		
	}

	.conten-center {
		width: 702rpx;
		// height: 368rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 32rpx;
		padding: 24rpx 0;
		
		.center-title{
			display: flex;
			align-items: center;
			
			.title-btn{
				width: 8rpx;
				height: 32rpx;
				background: #0868FA;
			}
			
			text{
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 700;
				font-size: 34rpx;
				color: #3D3D3D;
				margin-left: 12rpx;
			}
		}
		
		
		.list-conent{
			margin-top: 32rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			.item{
				.item-top{
					height: 72rpx;
					background: #F0F6FF;
					border-radius: 8rpx 8rpx 0rpx 0rpx;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					box-sizing: border-box;
					.item-top-btn{
						width: 8rpx;
						height: 8rpx;
						background: #0868FA;
						transform: rotate(45deg);
						
					}
					text{
						margin-left: 12rpx;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
					}
				}
				
				.item-bottom{
					display: flex;
					flex-wrap: wrap;
					.item-bottom-cell{
						height: 72rpx;
						background: #FFFFFF;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid #EEEEEE;
						width: 303rpx;
						line-height: 72rpx;
						padding-left: 20rpx;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #606060;
					}
				}
			}
		}
		

		
	}

	

	.list {
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			text {
				margin-top: 10rpx;
				color: #1296db;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
			}

		}

		.item:nth-child(n+2) {
			margin-left: 20rpx;
		}
	}
	
	.sort-list{
		margin-top: 32rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		.sort-item{
			display: flex;
			align-items: center;
			.sort-name{
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #606060;
			}
			.sort-img{
				display: flex;
				flex-direction: column;
				margin-left: 8rpx;
				image{
					width: 14rpx;
					height: 8rpx;
				}
			}
		}
	}
</style>